<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-08-03 15:33:03
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-09 10:12:01
 * @FilePath: \react\06.组件实例三大属性1_state\1,state.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */  
    //1.创建weather组件
    class Weather extends React.Component{  
        //constructor   构造器调用几次  一次   
        constructor(props){
            super(props)
            //初始化状态
            this.state = {
                isHot:true,
                wind:"微风"
            }
            //this.changeWeather.bind(this) 会返回一个新函数.并且新函数的this指向是Weather实例对象自身
            //给Weather实例对象身上添加changeWeather方法,
            //解决changWeather中this指向的问题
            this.changeWeather = this.changeWeather.bind(this);
            // this.ch2 = this.changeWeather.bind(this);
            // console.log("first",this.changeWeather.bind(this))
            // const wfn = this.changeWeather.bind(this);
            // wfn();
        }
        //render d调用几次  1+n 次, 初始化一次 ,状态改变几次时候调用几次
        render(){
            const {isHot,wind} = this.state;
            return <h1 id="title" onClick={this.changeWeather }>今天天气很{isHot?'炎热':'凉爽'},{wind}</h1>
        }
        //changeWeather 调用几次 ---点击几次,调用几次
        changeWeather(){
            //changeWeather放在哪里? ---Weather的原型对象上,供实例使用
            //通过Weather 实例调用changeWeather时,changeWeather中的this就是Weather实例 
            //由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用的
            //类中的方法默认开启了局部严格模式,所以changeWeather中的this为undefined
            // console.log("this",this)
            // this.state.isHot = !this.state.isHot;
            //获取原来的isHot值
            const isHot = this.state.isHot;
            //严重注意;状态必须通过setState()更新,修改,且更新是一种合并,不会整个替换state对象
            this.setState({
                isHot:!isHot
            })
            /****             * 
             * 严重注意//状态(state)不可直接更改下面这行就是直接更改
             * *******/ 
           // this.state.isHot = !isHot;//这是错误的写法
           
        }
        
    }
    // const w = new Weather();
    // // w.ch2()
    // console.log(w.ch2)
    //2.渲染虚拟DOM到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'))
    //绑定事件
    // const t1 = document.getElementById('title');
    // t1.addEventListener('click',()=>{
    //     alert("标题被点击了")
    // })
    // const t1 = document.getElementById('title');
    // t1.onclick = ()=>{
    //   alert("标题被点击了")
    // }
   
    </script>
</body>

</html>
